<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>投诉/建议</title>
    <link href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-container" style="margin-top: 20px;">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <select lay-verify="required" name="type">
                    <option value="">请选择类型</option>
                    <option value="complaint">投诉</option>
                    <option value="suggestion">建议</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input class="layui-input" lay-verify="required" maxlength="15" name="title"
                       placeholder="请输入标题（最多15字）" type="text">
                <div class="layui-form-mid layui-word-aux">0/15</div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">内容</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" lay-verify="required" maxlength="200"
                          name="content" placeholder="请输入内容（最多200字）"></textarea>
                <div class="layui-form-mid layui-word-aux">0/200</div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-filter="formSubmit" lay-submit>提交</button>
            </div>
        </div>
    </form>
</div>

<script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script>
<script>
    layui.use(['form', 'jquery'], function () {
        var form = layui.form;
        var $ = layui.$;

        // 实时显示字数
        $('input[name="title"], textarea[name="content"]').on('input', function () {
            var maxLength = $(this).attr('maxlength');
            var currentLength = $(this).val().length;
            $(this).next('.layui-form-mid').text(currentLength + '/' + maxLength);
        });

        // 监听提交
        form.on('submit(formSubmit)', function (data) {
            $.ajax({
                url: '/complaints/add',
                type: 'post',
                contentType: 'application/json',
                data: JSON.stringify({
                    content: data.field.content,
                    ownerId: sessionStorage.getItem("userId"),
                    acceptTime: new Date().toISOString()
                }),
                success: function (res) {
                    if (res.code === 200) {
                        layer.msg(res.msg);
                    }
                }
            });
            return false;
        });
    });
</script>
</body>
</html>
